import React, { useState, useCallback } from 'react';
import JsonEditor from './components/JsonEditor';
import JsonVisualizer from './components/JsonVisualizer';
import MappingDisplay from './components/MappingDisplay';
import SwaggerVisualizer from './components/SwaggerVisualizer';
import { Button, Box, Paper } from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import './App.css';

function App() {
  const [xInputs, setXInputs] = useState([]);
  const [yInput, setYInput] = useState(null);
  const [mappings, setMappings] = useState([]);
  const [resetCounter, setResetCounter] = useState(false);

  const handleXInputChange = (jsons) => {
    if (Array.isArray(jsons)) {
      setXInputs(jsons.map((json, index) => ({
        id: String.fromCharCode(65 + index),
        data: json
      })));
    }
  };

  const handleYInputChange = (json) => {
    if (json && !json.id) {
      setYInput({
        id: 'result',
        data: json
      });
    }
  };

  const handleMappingChange = useCallback((newMappings) => {
    setMappings(newMappings);
  }, []);

  const handleSchemaSelect = (schemaData) => {
    if (schemaData.type === 'x') {
      setXInputs(prev => {
        const newInput = {
          id: String.fromCharCode(65 + prev.length),
          data: schemaData.data
        };
        
        return [...prev, newInput];
      });
    } else {
      const newYInput = {
        id: 'result',
        data: schemaData.data
      };
      setYInput(newYInput);
    }
    setResetCounter(false);
  };

  const handleXJsonEditorValue = () => {
    console.log('Current xInputs:', xInputs);
    if (!xInputs || xInputs.length === 0) return '';
    return JSON.stringify(xInputs.map(input => input.data), null, 2);
  };

  const handleYJsonEditorValue = () => {
    console.log('Current yInput:', yInput);
    if (!yInput) return '';
    return JSON.stringify(yInput.data, null, 2);
  };

  const handleClearAll = () => {
    setXInputs([]);
    setYInput(null);
    setMappings([]);
    handleMappingChange([]);
    setResetCounter(true);
  };

  return (
    <div className="app">
      <Box sx={{ 
        display: 'flex', 
        justifyContent: 'flex-end', 
        padding: '10px',
        position: 'fixed',
        bottom: 0,
        right: 70,
        zIndex: 1000
      }}>
        <Button
          variant="contained"
          color="error"
          startIcon={<DeleteIcon />}
          onClick={handleClearAll}
          sx={{ 
            boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
            '&:hover': {
              boxShadow: '0 4px 8px rgba(0,0,0,0.2)'
            }
          }}
        >
          清除所有数据
        </Button>
      </Box>
      <div className="editors-container">
        <JsonEditor
          multiple={true}
          onChange={handleXInputChange}
          className="x-editor"
          placeholder="输入多个JSON (X输入)"
          value={handleXJsonEditorValue()}
        />
        <JsonEditor
          multiple={false}
          onChange={handleYInputChange}
          className="y-editor"
          placeholder="输入单个JSON (Y输入)"
          value={handleYJsonEditorValue()}
        />
      </div>
      <JsonVisualizer
        xInputs={xInputs}
        yInput={yInput}
        onMappingChange={handleMappingChange}
      />
      <MappingDisplay 
        mappings={mappings} 
        yInput={yInput}
      />
      <SwaggerVisualizer 
        onSelectSchema={handleSchemaSelect} 
        xInputsCount={xInputs.length}
        resetCounter={resetCounter}
      />
    </div>
  );
}

export default App; 